<script setup lang="ts">
  import { ref } from 'vue'
  import {
    cancelSignUp,
    isPlayProducts,
    personOrderList,
    teamOrderList
  } from '@/api/training'
  import { onShow } from '@dcloudio/uni-app'
  import { SIGN_ENUM, SIGN_ENUM_TEXT } from '@/utils/basicData'
  import { msg, showModal } from '@/utils/tools'
  const dataList = ref([])
  const paging = ref()
  const tabIndex = ref(0)
  const typeItem = ref(null)
  const tabList = ref([
    { name:'全部',type:null },
    { name:'未支付',type:1 },
    { name:'已支付',type:2 }
  ])

  onShow(() => {
    reload()
  })
  const loadFun = (pageNo:number, pageSize:number) => {
    if(tabIndex.value == 0){// 个人订单
      personOrderList({pageNo,pageSize,type:typeItem.value}).then(res => {
        if(res.code == 200){
          paging.value.complete(res.data.data)
        }else{
          paging.value.complete(false)
        }
      }).catch(err => {
        paging.value.complete(false)
      })
    }
    if(tabIndex.value == 1){ // 团队订单
      teamOrderList({pageNo,pageSize,type:typeItem.value}).then(res => {
        if(res.code == 200){
          paging.value.complete(res.data.data)
        }else{
          paging.value.complete(false)
        }
      }).catch(err => {
        paging.value.complete(false)
      })
    }
  }
  const tabClick = (data:any) => {
    typeItem.value = data.type
    paging.value.reload()
  }
  const reload = () => {
    paging.value && paging.value.reload()
  }
  const cancelEnum = (registrationOrderStatusEnum:any) => {
    return [0,2,3,8].indexOf(registrationOrderStatusEnum) > -1
  }
  const playEnum = (data:number) => {
    return [-2,2,3,8].indexOf(data) > -1
  }
  const navigatorClick = (url:string) => {
    uni.navigateTo({url})
  }
  // 修改信息
  const modifyingInformation = (data:any) => {
    const params = {
      eventsId:data.eventsId,
      campId:data.campId,
      orderId:data.id,
    }
    navigatorClick(`/pageSignUp/personalSignUp/personalSignUp?params=${encodeURIComponent(JSON.stringify(params))}`)
  }
  const orderClick = (data:any) => {
    if(data.registrationOrderStatusEnum == 0){ // 待提交
      modifyingInformation(data)
    }else{
      navigatorClick(`/pageSignUp/trainOrder/trainOrder?id=${data.id}`)
    }
  }
  const cancelClick = (data:any) => {
    showModal({
      content:'您确定要取消报名吗？',
      success:(res) => {
        if(res.confirm){
          cancelSignUp({id:data.id}).then(res => {
            msg('取消成功')
            paging.value.reload()
          })
        }
      }
    })
  }

  const productsPlay = (id:number) => {
    isPlayProducts({registrationId:id}).then(res => {
      if(res.data){
        uni.navigateTo({url:`/pageSignUp/productsOrder/productsOrder?id=${id}`})
      }else{
        uni.navigateTo({url:`/pageSignUp/additionalProducts/additionalProducts?id=${id}`})
      }
    })
  }
  const insuranceEdit = (data:any) => {
    uni.navigateTo({url:`/pageSignUp/insuranceEdit/insuranceEdit?id=${data.id}`})
  }

  defineExpose({reload})
</script>

<template>
  <z-paging ref="paging" class="z-paging" v-model="dataList" @query="loadFun">
    <template #top>
      <xx-title title="训练营订单"/>
      <view style="background: #FFFFFF">
        <up-tabs
          :list="tabList"
          @click="tabClick"
          lineColor="#90C762"
          :activeStyle="{color:'#90C762',fontWeight:'500'}"
          :inactiveStyle="{color:'#212223'}"
          :scrollable="false"></up-tabs>
      </view>
    </template>
    <block v-for="(item,index) in dataList" :key="index">
      <view class="order-item" @click="navigatorClick(`/pages/teamOrder/teamOrder?id=${item.campId}`)" v-if="tabIndex == 1">
        <view class="order-title">
          <view class="order-time">
            报名时间：{{item.registrationStartTime}}
          </view>
          <view class="order-right origin_text">{{item.status == 1 ?'暂存':'提交'}}</view>
        </view>
        <view class="order-body">
          <view class="order-name">{{item.campName}}</view>
          <view class="order-name">{{item.itemName}}({{item.eventsNumberName}})</view>
          <view class="order-body-item" v-for="(items, inx) in item.persons" :key="inx">
            {{ items.name }}{{item.idCard}}
          </view>
          <view class="order-project-info">
            <view class="order-project-left">
              <view class="left-title">共参加{{item.totalPersonCount}} 人</view>
              <view class="left-time">{{item.startTime}} ~ {{item.completionTime}}</view>
            </view>
            <view class="order-project-right">
              ￥{{item.totalAmount}}
            </view>
          </view>
        </view>
        <view class="order-btn">
          <view class="btn">查看详情</view>
<!--          <view class="btn success">补充资料</view>-->
        </view>
      </view>
      <view class="order-personal" @click="orderClick(item)" v-if="tabIndex == 0">
        <view class="order-time">
          <view class="order-left">
            报名时间：{{item.createdTime}}
          </view>
          <view class="order-right" :class="SIGN_ENUM_TEXT[item.registrationOrderStatusEnum]">{{SIGN_ENUM[item.registrationOrderStatusEnum]}}</view>
        </view>
        <view class="order-body">
          <view class="order-body-left">
            <view class="order-name">{{item.campName}}</view>
            <view class="order-group">{{item.itemName}}({{item.eventsNumberName}})</view>
            <view class="order-card"><text>{{ item.name }}</text> {{ item.idCardMask }}</view>
          </view>
          <view class="order-body-right">
            <view class="order-number">x1</view>
          </view>
        </view>
        <view class="order-btn">
          <view class="btn" v-if="item.registrationOrderStatusEnum != 0 && item.registrationOrderStatusEnum != -4" @click.stop="orderClick(item)">查看详情</view>
          <view class="btn" v-if="cancelEnum(item.registrationOrderStatusEnum)" @click.stop="cancelClick(item)">取消报名</view>
          <view class="btn success" v-if="item.registrationOrderStatusEnum == 0" @click.stop="modifyingInformation(item)">继续填写</view>
          <view class="btn success" v-if="playEnum(item.registrationOrderStatusEnum)">立即支付</view>
<!--          <view class="btn success" v-if="item.productsBuy" @click.stop="productsPlay(item.id)">附加产品</view>-->
          <view class="btn danger" v-if="item.registrationOrderStatusEnum == -4" @click.stop="insuranceEdit(item)">修改保险</view>
        </view>
      </view>
    </block>
  </z-paging>
</template>

<style scoped lang="scss">
  ::v-deep.z-paging-content{
    background-color: #F5F5F5;
  }
  .tab{
    display: flex;
    justify-items: center;
    align-items: center;
    background-color: #FFFFFF;
    height: 80rpx;
    width: 100%;
    .tab-item{
      width: 50%;
      text-align: center;
      height: 100%;
      &.active{
        color: #92C75B;
        position: relative;
        &:before{
          content: '';
          position: absolute;
          display: block;
          bottom: 0;
          height: 8rpx;
          width: 100rpx;
          background-color: #92C75B;
          border-radius: 10rpx;
          left: calc((100% - 100rpx) / 2);
        }
      }
    }
  }
  .order-item{
    margin: 24rpx 28rpx;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    .order-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 24rpx;
      border-bottom: 1px solid #F3F3F3;
      .order-time{
        color:#818496;
        font-size: 24rpx;
      }
      .order-state{
        font-size: 28rpx;
      }
    }
    .order-body{
      padding: 24rpx 0;
      .order-name{
        font-size: 32rpx;
        color:#21252E;
        font-weight: 500;
      }
      .order-body-item{
        padding: 16rpx 0 0 0;
        font-size: 24rpx;
        color: #505363;
        &:last-child{
          padding-bottom: 24rpx;
        }
      }
    }
    .order-project-info{
      border-bottom: 1px solid #F3F3F3;
      border-top: 1px solid #F3F3F3;
      padding: 16rpx 0;
      margin-top: 8rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .order-project-left{
        width: calc(100% - 150rpx);
        .left-title{
          color: #505363;
          font-size: 28rpx;
          font-weight: 500;
        }
        .left-time{
          color: #818496;
          font-size: 24rpx;
          margin-top: 5rpx;
        }
      }
      .order-project-right{
        width: 150rpx;
        text-align: right;
        color: #F37C2B;
        font-size: 32rpx;
        font-weight: 500;
      }
    }
    .order-btn{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .btn{
        font-size: 28rpx;
        line-height: 1;
        color: #505363;
        border: 1px solid #ECEEF1;
        box-sizing: border-box;
        padding: 12rpx 24rpx;
        border-radius: 24px;
        margin-left: 20rpx;
      }
    }
  }
  .order-personal{
    margin: 24rpx 28rpx;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    .order-time{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 24rpx;
      border-bottom: 1px solid #F3F3F3;
      .order-left{
        color:#818496;
        font-size: 24rpx;
      }
      .order-right{
        font-size: 28rpx;
      }
    }
    .order-body{
      display: flex;
      justify-content: center;
      padding: 10rpx 0;
      //height: 136rpx;
      .order-body-left{
        height: 100%;
        width: calc(100% - 180rpx);
        margin-bottom: 10rpx;
        .order-name{
          font-weight: 500;
          font-size: 28rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .order-group{
          font-size: 28rpx;
          margin: 10rpx 0;
          color: #505363;
        }
        .order-card{
          font-size: 28rpx;
          color: #505363;
        }
      }
      .order-body-right{
        text-align: right;
        width: 180rpx;
        height: 100%;
        border-left: 1rpx dashed #f9f9f9;
        .order-money{
          color: #21252E;
          font-size: 28rpx;
          margin-bottom: 10rpx;
        }
        .order-number{
          font-size: 24rpx;
          color: #818496;
        }
      }
    }

    .service-list{
      padding: 10rpx;
      .service-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        border-radius: 20rpx;
        background-color: rgba(243, 124, 43, 0.06);
        .service-body{
          width: calc(100% - 100rpx);
          .service-title{
            font-size: 28rpx;
            color: #505363;
          }
          .service-content{
            margin-top: 5rpx;
            font-size: 24rpx;
            color: #818496;
          }
        }
        .service-btn{
          width:100rpx;
          .btn{
            margin: auto 0;
            padding: 14rpx 20rpx;
            border-radius: 10rpx;
            background-color: #F36E13;
            color:#ffffff;
            font-size: 28rpx;
            text-align: center;
          }
        }
      }
    }

    .order-btn{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      border-top: 1rpx solid #F3F3F3;
      padding-top: 20rpx;
      .btn{
        font-size: 28rpx;
        color: #505363;
        border: 1px solid #ECEEF1;
        line-height: 1;
        box-sizing: border-box;
        padding: 16rpx 24rpx;
        border-radius: 24px;
        margin-left: 20rpx;
        &.success{
          color: #ffffff;
          background-color: #92C75B;
        }
        &.danger{
          color: #ffffff;
          background-color: #f54747;
        }
      }
    }
  }
</style>
